<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%@page errorPage="/pages/error.jsp" %>
<%@taglib uri='/WEB-INF/tlds/cewolf.tld' prefix='cewolf' %>
<%@page import="java.util.ArrayList" %>
<%@page import="java.lang.String" %>

<%@page import="fr.ubdx1.jacomode.models.BarChartModel" %>
<%@page import="fr.ubdx1.jacomode.models.DataColorChart" %>
<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>JACoMode</title>
        <meta name="author" content="Jonathan MERCIER, Louise-Amélie SCHMITT, Florence Maurier, Marianne Dussart, Nicolas Fontaine"/>
        <meta name="keywords" content="bioinformatique,bioinformatiques,bioinformatic,bioinformatics,open source,linux,software,logiciel,biologie,biology,ADN,DNA,protéine,proteomic,génomique,genomic,protéomique,proteomic,pathway,metatool,ACoM,JACoMode,Java,JEE,JSP,metabolic,network"/>
        <meta name="description" content="JACoMode it is a tool for analysis metabolic network"/>
        <meta name="ROBOTS" content="INDEX, FOLLOW"/>
        <link href="JACoMode.css" rel="stylesheet" type="text/css"/>
        <script type='text/javascript' src='/JACoMode/dwr/interface/Content.js'></script>
        <script type='text/javascript' src='/JACoMode/dwr/engine.js'></script>
        <script type='text/javascript' src='/JACoMode/dwr/util.js'></script>
        <script type="text/javascript" src='dynamicForward.js'></script>
    </head>
    <body>
        <div id="conteneur">
            <div id="header">
				<div class="hd"></div>
				<div class="bd"></div>
                <a href="index.jsp"><img src="IMAGES/JACoMode.png" width="270" height="60" alt="JACoMode.png"/></a><h2>Graphical frontend for ACoM</h2>
            </div>
                        <div id="left">
                <div class="hg"></div>
                <div class="hd"></div>
                <div class="bg"></div>
                <div class="bd"></div>
                <p class="titleCenter" >Menu</p>
                <a href="#" title="Process new file"    onclick="forward('acomForm')"           onmouseover="return overImage('processNewFile')"       onMouseOut= "return outImage('processNewFile')"    ><img id="processNewFile"    src="IMAGES/buttons/processNewFile1.png"      width="180" height="46" alt="link to process new file web page" /></a><br/>
                <a href="resultTable" title="Table result"                                      onmouseover="return overImage('tableResult')"          onMouseOut= "return outImage('tableResult')"       ><img id="tableResult"       src="IMAGES/buttons/tableResult1.png"         width="180" height="46" alt="link to table result web page"     /></a><br/>
                <a href="#" title="Comparaison"         onclick="forward('compareForm')"        onmouseover="return overImage('compareStatistics')"    onMouseOut= "return outImage('compareStatistics')" ><img id="compareStatistics" src="IMAGES/buttons/compareStatistics1.png"   width="180" height="46" alt="link to statistics web page"       /></a><br/>
                <a href="#" title="Overall reaction"    onclick="forward('bilanForm')"          onmouseover="return overImage('overallReaction')"      onMouseOut= "return outImage('overallReaction')"   ><img id="overallReaction"   src="IMAGES/buttons/overallReaction1.png"     width="180" height="46" alt="link to overall reaction web page" /></a><br/>
                <a href="#" title="About JACoMode"      onclick="forward('about')"              onmouseover="return overImage('about')"                onMouseOut= "return outImage('about')"             ><img id="about"             src="IMAGES/buttons/about1.png"               width="180" height="46" alt="link to about web page"            /></a><br/>
        </div>
            <div id="center">
				<div class="hg"></div>
                <div class="hd"></div>
                <div class="bg"></div>
                <div class="bd"></div>

		<h1>Results</h1>
		<p>Click on the tabs to browse results.</p>
		<div class="menu1"> <!-- tabs box begin -->
        <a      class="onglet" href="selectWichAcomSession" title="Acom Session"            onclick="forward('selectWichAcomSession')">Acom Session</a> <!-- inactive tab -->
		<a      class="onglet" href="acomGlobalResults"     title="Result Global"           onclick="forward('acomGlobalResults')">Global result</a> <!-- inactive tab -->
		<span   class="onglet onglet-actif">By motif size</span><!-- active tab -->
		<a      class="onglet" href="acomResultsByEFM"      title="Result by efm"           onclick="forward('acomResultsByEFM')">By efm</a> <!-- inactive tab -->
		<div class="spacer"></div> <!-- tabs box end -->
		</div>
		<fieldset>
			<%
                ArrayList<Integer> sizeOfMotif         = (ArrayList<Integer>)request.getAttribute("sizeOfMotif");
                ArrayList<Integer> nbClassByMotifSize  = (ArrayList<Integer>)request.getAttribute("nbClassByMotifSize");
                ArrayList<Integer> iDClassByMotifSize  = (ArrayList<Integer>)request.getAttribute("IDClassByMotifSize");
                out.println("<script type=\"text/javascript\">");
                out.print("var nbClassByMotifSize = [");
                for (int i = 0; i < (nbClassByMotifSize.size()-1); i++)
                {
                    out.print("\""+nbClassByMotifSize.get(i)+"\", ");
                }
                out.println("\""+nbClassByMotifSize.get( (nbClassByMotifSize.size()-1) )+"\"];");

                out.print("var iDClassByMotifSize = [");
                for (int i = 0; i < (iDClassByMotifSize.size()-1); i++)
                {
                    out.print("\""+iDClassByMotifSize.get(i)+"\", ");
                }
                out.println("\""+iDClassByMotifSize.get( (iDClassByMotifSize.size()-1) )+"\"];");
                out.println("</script>");

            %>
            <select name="motifSize" id="motifSize" onchange="showClass(this.selectedIndex,nbClassByMotifSize,iDClassByMotifSize)">
			<option>Select motif size</option>
            <%
                for(int i=0; i<sizeOfMotif.size(); i++)
                {
                    out.println("<option>" + sizeOfMotif.get(i) + "</option>");
                }
            %>
			</select>
            <div id="totalMotif"><span id="totalMotif1">Number of motifs size :</span><span id="totalMotif2"></span><%=  request.getAttribute("nbMotifSize")%></div>
			<div id="meanNb"><span id="meanNb1">Average motif size :</span><span id="meanNb2"><%=  request.getAttribute("meanMotif")%></span></div>
            <div id="nbClass"><span id="nbClass1">Number of classes :</span><span id="nbClass2">  ---  </span></div>
			<div id="listClass"><span id="listClass1">Classes :</span><span id="listClass2">  ---  </span></div>
                        <%
                        int width = (78 + sizeOfMotif.size()*35);
                        %>
                        <center>
                        <%if (width>800){out.println("<div class='scroll2' align=center>");}%>

			<jsp:useBean id= "motifChar" class="fr.ubdx1.jacomode.models.BarChartModel"/>
                            <cewolf:chart
                                id="jacomode"
                                title=""
                                type="verticalbar"
                                xaxislabel="Motif Size"
                                yaxislabel="Number of classes"
                                showlegend="fase">
                                <cewolf:colorpaint color="#bad27c"/>
                                <cewolf:data>
                                    <cewolf:producer id="motifChar">
                                        <cewolf:param name="categories" value="<%=(ArrayList<Integer>)sizeOfMotif%>" />
                                        <cewolf:param name="repeat" value="<%=(ArrayList<Integer>)nbClassByMotifSize%>" />
                                    </cewolf:producer>
                                </cewolf:data>
                                <jsp:useBean id= "color" class="fr.ubdx1.jacomode.models.DataColorChart"/>
                                <cewolf:chartpostprocessor id = "color">
                                    <cewolf:param name="0" value='<%= "#91000B" %>'/>
                                </cewolf:chartpostprocessor>
                            </cewolf:chart>

                            <cewolf:img alt="verticalbar" chartid="jacomode" renderer="cewolf" width="<%=width%>" height="300"/>
                        <% if (width>800){out.println("</div>");}%>
                        </center>
		</fieldset>

		<p> Download results : <a href="download.tar.bz2" title="link">download archive (.tar.bz2) </a>

            </div>
            <div id="foot">
            </div>
        </div>
    </body>
</html>
